<!--
 * @页面名称:综合检索
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card synthesize">
    <!-- 头部搜索模块 -->
    <div class="synthesize_top">
      <el-row type="flex" justify="start" align="middle">
        <el-col :span="3">
          <span>综合搜索平台</span>
        </el-col>
        <el-col :span="4">
          <div class="query">
            <span style="width: 40px; margin-right: 5px">全宗:</span>
            <el-tree-select
              check-strictly
              v-model="Fonds_ID"
              @change="onFondsChange"
              node-key="Fonds_ID"
              :props="{ label: 'Fonds_Name', children: 'children' }"
              :data="FondsData"
              :render-after-expand="false"
            />
          </div>
        </el-col>
        <el-col :span="14">
          <div class="query">
            <el-input v-model="searchString" placeholder="请输入查询内容" />
            <el-button type="primary" @click="search">查询</el-button>
          </div>
        </el-col>
        <!-- <el-col :span="3">
          <el-button type="primary">导出</el-button>
        </el-col> -->
      </el-row>
    </div>
    <div class="synthesize_content">
      <splitpanes :dbl-click-splitter="false" horizontal style="height: 100%">
        <pane>
          <Stable
            style="height: 100%"
            :columns="tableSetting.columns"
            :data="tableSetting.data"
            :tablePage="tableSetting.tablePage"
            :pageSizes="[15, 100, 1000, { label: '全量数据', value: -1 }]"
            @rowClick="rowClick"
            @pageChange="pageChange"
          ></Stable>
        </pane>
        <pane>
          <splitpanes :dbl-click-splitter="false" style="height: 100%">
            <pane>
              <!-- 副表格 -->
              <Stable :columns="tableSetting2.columns" :data="tableSetting2.data" @rowClick="rowClick2"></Stable>
            </pane>
            <pane>
              <!-- 全文表格 -->
              <Stable
                :columns="tableSetting3.columns"
                :data="tableSetting3.data"
                :tableMenu="tableSetting3.tableMenu"
                @menuClick="menuClick"
                @rowdblClick="rowdblClick"
              ></Stable>
            </pane>
          </splitpanes>
        </pane>
      </splitpanes>
    </div>
    <!-- 预览全文 -->
    <preview
      v-if="fulltextConfig.visible"
      :visible="fulltextConfig.visible"
      :type="fulltextConfig.type"
      :fileList="fulltextConfig.fileList"
      :download="fulltextConfig.download"
      :print="fulltextConfig.print"
      @updataVisible="updataVisible"
    ></preview>
  </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted } from "vue";
import useCurrentInstance from "@/utils/useCurrentInstance";
import { transTree } from "@/utils/util";
import { Splitpanes, Pane } from "splitpanes";
import "splitpanes/dist/splitpanes.css";
import ACrypto from "@/utils/crypto";
import { fileSizeFormat } from "@/utils/formatter";
import { useCatalogStore } from "@/stores/modules/catalog";
import { previewFulltext } from "@/components/Preview/ts/index";
import Preview from "@/components/Preview/Preview.vue";

const { proxy } = useCurrentInstance();
const catalogStore = useCatalogStore();
// 搜索绑定字段
const searchString = ref("");
// 全宗绑定字段
const Fonds_ID = ref("");
// 全宗数据集合
const FondsData: any = ref([]);
// 格式化表头
const formatter = ({ row, column, cellValue }: any) => {
  const catalogList = catalogStore.catalogList;
  // 分类
  if (column.property === "Catalog_ID") {
    const data = catalogList.find((v: any) => v.Catalog_ID === cellValue);
    return data ? data.Catalog_Name : "";
  }
  if (column.property === "Title") {
    cellValue = ACrypto.getSS(row[column.property]);
  }
  return cellValue;
};
// 主表表格配置
const tableSetting = reactive({
  // 表格数据
  data: [],
  // 表格列配置
  columns: [
    { title: "分类", field: "Catalog_ID", width: 300, sortable: true, formatter: formatter },
    { title: "档号", field: "Code", width: 250, sortable: true },
    {
      title: "标题",
      field: "Title",
      slots: {
        default: ({ row }: any) => {
          return [<span class="col-cont" v-html={showData(row.Title)}></span>];
        }
      }
    },
    { title: "日期", field: "Record_DateTime", width: 150, sortable: true }
  ],
  tablePage: {
    showPage: true,
    pageIndex: 1,
    pageSize: 15,
    total: 0
  }
});
// 副表格配置
const tableSetting2 = reactive({
  // 表格数据
  data: [],
  // 表格列配置
  columns: [
    { title: "分类", field: "Catalog_ID", width: 300, sortable: true, formatter: formatter },
    { title: "档号", field: "Code", width: 100, sortable: true },
    { title: "年份", field: "Year", width: 100, sortable: true },
    { title: "标题", field: "Title", sortable: true, formatter: formatter }
  ]
});
// 全文表格配置
const tableSetting3 = reactive({
  columns: [
    { title: "顺序号", field: "AI_Index", width: 100, sortable: true },
    { title: "文件名", field: "AI_Name", width: 100, sortable: true },
    { title: "文件大小", field: "AI_Source_Size", width: 100, sortable: true, formatter: fileSizeFormat },
    { title: "上传时间", field: "AI_UploadDateTime", width: 100, sortable: true },
    { title: "创建时间", field: "AI_FileDateTime", sortable: true }
  ],
  data: [],
  tableMenu: {
    enabled: true,
    className: "my-menus",
    body: {
      options: [[{ code: "dataInfo", name: "加入超链接清单", prefixIcon: "DocumentAdd", className: "my-copy-item" }]]
    }
  }
});
// 全文预览配置参数
const fulltextConfig = reactive({
  // 预览全文配置参数
  visible: false,
  fileList: [] as any[],
  type: "",
  download: false,
  print: false
});
// 获取全宗数据
const getFondsData = () => {
  proxy.$vueAxios.get("Master_Base_Fonds/Get", { order: "Fonds_Order asc" }).then((res: any) => {
    // FondsData.value = res.List;
    FondsData.value = transTree(res.List, "Fonds_ID", "Fonds_Father");
  });
};
// 切换全宗事件
const onFondsChange = (val: any) => {
  proxy.$vueAxios.get("DynamicStatistics/GetFM", { fondsID: val }, { noLoading: true }).then((res: any) => {});
};
// 点击查询
const search = () => {
  getTbaleData();
};
// 获取主表格数据
const getTbaleData = () => {
  proxy.$vueAxios
    .get("SearchContent/SearchContents", {
      fondsId: Fonds_ID.value,
      keywords: searchString.value,
      pageIndex: tableSetting.tablePage.pageIndex,
      pageSize: tableSetting.tablePage.pageSize
    })
    .then((res: any) => {
      tableSetting.data = res.List;
      tableSetting.tablePage.total = res.Count;
    });
};
// 主表格单击
const rowClick = ({ row }: any) => {
  // 获取子表格数据
  getTableData2(row);
  // 获取全文表格数据
  fullTextData(row);
};
// 获取副表格数据
const getTableData2 = (data: any) => {
  proxy.$vueAxios
    .get(
      "Dynamic/CommonChildGet",
      {
        fmtid: data.FMT_ID,
        dataId: data.Record_ID
      },
      { noLoading: true }
    )
    .then((res: any) => {
      tableSetting2.data = res.List;
    });
};
// 获取全文表格数据
const fullTextData = (data: any) => {
  proxy.$vueAxios
    .post("Master_Base_AllInfos/GetConditional", {
      order: "AI_Index asc",
      dtoList: [{ fieldName: "Record_ID", fieldValue: data.Record_ID }]
    })
    .then((res: any) => {
      tableSetting3.data = res.List;
    });
};
// 副表格单击
const rowClick2 = ({ row }: any) => {
  // 获取全文表格数据
  fullTextData(row);
};
// 全文表格双击
const rowdblClick = ({ row }: any) => {
  previewFulltext(
    {
      id: row.AI_ID,
      fulltextRow: row,
      fulltextTableData: [row],
      config: fulltextConfig,
      IsAllow: true
    },
    proxy
  );
};
// 切换分页
const pageChange = ({ pageIndex, pageSize }: any) => {
  tableSetting.tablePage.pageIndex = pageIndex;
  tableSetting.tablePage.pageSize = pageSize;
  getTbaleData();
};
// 搜索数据显示高亮
const showData = (val: string) => {
  const newVal = ACrypto.getSS(val);
  if (newVal.indexOf(searchString.value) !== -1 && searchString.value !== "" && newVal) {
    return newVal.replace(searchString.value, '<font color="red">' + searchString.value + "</font>");
  } else {
    return newVal;
  }
};
// 更新预览窗口状态
const updataVisible = (value: boolean) => {
  fulltextConfig.visible = value;
};
// 右键点击
const menuClick = ({ menu, row, column }: any) => {
  if (!row) {
    proxy.$message.warning("请选中数据!");
    return;
  }
  if (menu.code === "dataInfo") {
    const id = proxy.$global.createID();
    proxy.$vueAxios
      .post("MasterBaseBorrow/Add", {
        id: id,
        fM_ID: row.FM_ID,
        fmT_ID: row.FMT_ID,
        status: row.Status,
        record_ID: row.Record_ID,
        stdaList: [{ id: proxy.$global.createID(), stD_ID: id }]
      })
      .then((res: any) => {
        if (res.Mark) {
          proxy.$message.success("添加成功!");
          proxy.$vueAxios.get("MasterBaseBorrow/Get").then((res: any) => {
            if (res.Mark) {
              userStore.setFileCount(res.Count);
            }
          });
        }
      });
  }
};
onMounted(() => {
  getFondsData();
});
</script>

<style scoped lang="scss">
.synthesize {
  height: 100%;
  .synthesize_top {
    margin-bottom: 10px;
    .query {
      display: flex;
      align-items: center;
      padding-right: 10px;
      // width: 400px;
    }
  }
  .synthesize_content {
    height: calc(100% - 42px);
  }
}
</style>
